{% extends "base/base.html" %}
{% load i18n %}
{% load dajaxice_templatetags %}
{% block title %}{% trans 'Inicio' %}{% endblock %}
{% comment %} Home {% endcomment %}
{% block content %}
    <!-- Start welcome-message -->
    <section class="welcome-message">
        <div class="container">
            <div class="hero-unit">
                <h4>
                    {% trans '¡Bienvenido al nuevo sitio de búsqueda de empleo en México!'%}
                    <br>
                    <small>{% trans 'Te invitamos a conocer por qué somos tu mejor opción para encontrar trabajo.' %}</small>
                </h4>
            </div>
        </div>
    </section>
    <!-- End welcome-message -->
    <!-- Start slider -->
    <section class="slider">
        <div class="container">
            <div class="well">
                <div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="active item">
                            <img src="{{STATIC_URL}}images/slides/slide_1.jpg" />
                            <div class="carousel-caption animation">
                                <h3 data-animate="fadeInDownBig" class="caption-black">{% trans 'No busques más empresas…' %}</h3>
                                <p data-animate="fadeInRightBig" class="caption-black-small">{% trans 'Deja que ellas te encuentren a ti.' %}</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="{{STATIC_URL}}images/slides/slide_2.jpg" />
                            <div class="carousel-caption animation">
                                <h3 data-animate="fadeInLeftBig" class="caption-white">Fully Responsive Layout</h3>
                                <p data-animate="fadeInRightBig" class="caption-white-small">Sed posuere consectetur est at lobortis.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="{{STATIC_URL}}images/slides/slide_3.jpg" />
                            <div class="carousel-caption animation">
                                <h3 data-animate="rotateIn" class="caption-black">HTML5 and CSS3 Technology</h3>
                                <p data-animate="rollIn" class="caption-black-small">Sed posuere consectetur est at lobortis.</p>
                            </div>
                        </div>
                    </div>
                    <!-- Carousel nav -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left"></i></a>
                    <a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"></i></a>
                </div>
            </div>
        </div>
    </section>
    <!-- End slider -->
    <!-- Start services -->
    <section class="services">
        <div class="container">
            <div class="row">
                <div class="span3">
                    <div class="well well-small">
                        <span class="service-icon"><i class="icon-resize-full"></i></span>
                        <h5>Responsive Layout</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam vehicula ut id elit.</p>
                        <a class="btn btn-mini" href="#">Read More</a>
                    </div>
                </div>
                <div class="span3">
                    <div class="well well-small">
                        <span class="service-icon"><i class="icon-list"></i></span>
                        <h5>Flexible Grid System</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam vehicula ut id elit.</p>
                        <a class="btn btn-mini" href="#">Read More</a>
                    </div>
                </div>
                <div class="span3">
                    <div class="well well-small">
                        <span class="service-icon"><i class="icon-th"></i></span>
                        <h5>Powerful Portfolio</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam vehicula ut id elit.</p>
                        <a class="btn btn-mini" href="#">Read More</a>
                    </div>
                </div>
                <div class="span3">
                    <div class="well well-small">
                        <span class="service-icon"><i class="icon-ok"></i></span>
                        <h5>IE Support</h5>
                        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam vehicula ut id elit.</p>
                        <a class="btn btn-mini" href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End services -->
    <!-- Start portfolio -->
    <section class="portfolio">
        <div class="container">
            <hr class="divider-home">
            <div class="row">
                <div class="span3">
                    <div class="section-overview">
                        <h5><span><i class="icon-minus"></i></span> Featured Works</h5>
                        <hr>
                        <p>Etiam auctor tincidunt augue at pharetra. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae.</p>
                        <a class="btn btn-mini btn-success" href="#">View Our Portfolio</a>
                    </div>
                </div>
                <div class="span9">
                    <ul class="thumbnails">
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="portfolio-item">
                                    <img src="{{STATIC_URL}}images/portfolio/portfolio_1.jpg" alt="">
                                    <div class="folio-body">
                                        <div class="folio-info">
                                            <h5><a href="#">Awesome Building</a></h5>
                                            <p>Digital Art | Illustration</p>
                                        </div>
                                        <div class="folio-zoom">
                                            <a href="{{STATIC_URL}}images/portfolio/portfolio_1.jpg" rel="prettyPhoto[pp_gal]"><i class="icon-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="portfolio-item">
                                    <img src="{{STATIC_URL}}images/portfolio/portfolio_2.jpg" alt="">
                                    <div class="folio-body">
                                        <div class="folio-info">
                                            <h5><a href="#">Girl in the Forest</a></h5>
                                            <p>Art Direction | Illustration</p>
                                        </div>
                                        <div class="folio-zoom">
                                            <a href="{{STATIC_URL}}images/portfolio/portfolio_2.jpg" rel="prettyPhoto[pp_gal]"><i class="icon-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="portfolio-item">
                                    <img src="{{STATIC_URL}}images/portfolio/portfolio_3.jpg" alt="">
                                    <div class="folio-body">
                                        <div class="folio-info">
                                            <h5><a href="#">Girl in the House</a></h5>
                                            <p>Digital Art | Photography</p>
                                        </div>
                                        <div class="folio-zoom">
                                            <a href="{{STATIC_URL}}images/portfolio/portfolio_3.jpg" rel="prettyPhoto[pp_gal]"><i class="icon-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="portfolio-item">
                                    <img src="{{STATIC_URL}}images/portfolio/portfolio_4.jpg" alt="">
                                    <div class="folio-body">
                                        <div class="folio-info">
                                            <h5><a href="#">Lovely Deer</a></h5>
                                            <p>Nature | Photography</p>
                                        </div>
                                        <div class="folio-zoom">
                                            <a href="{{STATIC_URL}}images/portfolio/portfolio_4.jpg" rel="prettyPhoto[pp_gal]"><i class="icon-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="portfolio-item">
                                    <img src="{{STATIC_URL}}images/portfolio/portfolio_5.jpg" alt="">
                                    <div class="folio-body">
                                        <div class="folio-info">
                                            <h5><a href="#">Cute Girl</a></h5>
                                            <p>Design | Creative</p>
                                        </div>
                                        <div class="folio-zoom">
                                            <a href="{{STATIC_URL}}images/portfolio/portfolio_5.jpg" rel="prettyPhoto[pp_gal]"><i class="icon-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="span3">
                            <div class="thumbnail">
                                <div class="portfolio-item">
                                    <img src="{{STATIC_URL}}images/portfolio/portfolio_6.jpg" alt="">
                                    <div class="folio-body">
                                        <div class="folio-info">
                                            <h5><a href="#">A Lonely Girl</a></h5>
                                            <p>Photography | Art</p>
                                        </div>
                                        <div class="folio-zoom">
                                            <a href="{{STATIC_URL}}images/portfolio/portfolio_6.jpg" rel="prettyPhoto[pp_gal]"><i class="icon-plus"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- End portfolio -->
    <!-- Start clients -->
    <section class="clients">
        <div class="container">
            <hr class="divider-home">
            <div class="row">
                <div class="span3">
                    <div class="section-overview">
                        <h5><span><i class="icon-minus"></i></span> Our Clients</h5>
                        <hr>
                        <p>Etiam auctor tincidunt augue at pharetra. Nam posuere tristique sem, eu ultricies tortor imperdiet vitae.</p>
                        <a class="btn btn-mini btn-success" href="#">View All Clients</a>
                    </div>
                </div>
                <div class="span9">
                    <div class="row">
                        <div class="span3">
                            <div class="well">
                                <a href="#"><img src="{{STATIC_URL}}images/partners/partner_1.jpg" /></a>
                            </div>
                        </div>
                        <div class="span3">
                            <div class="well">
                                <a href="#"><img src="{{STATIC_URL}}images/partners/partner_2.jpg" /></a>
                            </div>
                        </div>
                        <div class="span3">
                            <div class="well">
                                <a href="#"><img src="{{STATIC_URL}}images/partners/partner_3.jpg" /></a>
                            </div>
                        </div>
                        <div class="span3">
                            <div class="well">
                                <a href="#"><img src="{{STATIC_URL}}images/partners/partner_4.jpg" /></a>
                            </div>
                        </div>
                        <div class="span3">
                            <div class="well">
                                <a href="#"><img src="{{STATIC_URL}}images/partners/partner_5.jpg" /></a>
                            </div>
                        </div>
                        <div class="span3">
                            <div class="well">
                                <a href="#"><img src="{{STATIC_URL}}images/partners/partner_6.jpg" /></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End clients -->
{% endblock %}